import React,{memo} from 'react'
// import {useDispatch,useSelector,shallowEqual} from 'react-redux'
// import {getTopBannersAction} from './store/actionCreators'

import TopBanner from  './c-cpns/top-banner'
import HYNewAlbum from './c-cpns/new-album'
import HYRanking from './c-cpns/recommend-ranking'
import HYHotRecommend from '../recommend/c-cpns/hot-recommend'
import {RecommendContent,RecommendLeft,RecommendRight} from './style'
function Recommend(props) {
    // 方法一
    // const {getBanners} = props
    // useEffect(() => {
    //     //纯函数(connect)增强后我们就可以通过props取出
    //     getBanners()
    // },[getBanners])
    //方法二 组件kook与redux关联 获取数据和进行验证
    // useselector 默认不会对返回的对象进行浅层比较 只会做引用的比较===
    // const recommend = useSelector(state => ({
    //     // 又因为每回都返回一个新对象 即使有一样的没变化数据也不会比较出来浪费性能
    //     // topBanners:state.get("recommend").get("topBanners")
    //     topBanners:state.getIn(["recommend","topBanners"])
    // }),shallowEqual)
    // // shallowEqual优化将里面对象进行浅层比较
    // const dispatch = useDispatch()
    // useEffect(() => {
    //     dispatch(getTopBannersAction())
    // }, [dispatch])
    return (
        <div>
            {/* 轮播图区域 */}
            <TopBanner>
            {/* {recommend.topBanners.length} */}
            </TopBanner>
            <RecommendContent className='wrap-v2'>
                <RecommendLeft>
                    <HYHotRecommend></HYHotRecommend>
                    <HYNewAlbum></HYNewAlbum>
                    <HYRanking></HYRanking>
                </RecommendLeft>
                <RecommendRight></RecommendRight>
            </RecommendContent>
            

        </div>
    )
}

// mapStateToProps mapDispatchToProps 相当于定义了一个中介 让connect里给传入state 和dispatch
//我们给增强了topBanners getBanners 通过props可以拿到  通过getBanners 控制发送ajax时机
// const mapStateToProps =(state)=>({
// // 前面是我们自己定义增强的通过props又可以拿到     后面一部分是通过connect 里得到的 
//     topBanners:state.recommend.topBanners
// })
// const mapDispatchToProps =(dispatch)=>({
//     getBanners:()=>{
//         dispatch(getTopBannersAction())
//     }

// })
// export default connect(mapStateToProps,mapDispatchToProps)(memo(Recommend))
export default memo(Recommend)